<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .nav {
        width: 100vw;
        height: 10vw;
        overflow: hidden;
        border-bottom: 1px solid #eee;
      }

      .nav__wrapper {
        display: inline-flex;
        height: 10vw;
      }

      .nav__item {
        width: 20vw;
        text-align: center;
        line-height: 10vw;
      }

      .nav__item.active {
        border-bottom: 3px solid orange;
      }

      .content {
        overflow: hidden;
        width: 100vw;
        height: calc(100vh - 10vw);
      }

      .content__wrapper {
        display: inline-flex;
      }

      .content__item {
        width: 100vw;
        font-size: 30px;
        text-align: center;
        padding-top: 200px;
        height: 200vh;
      }

      .content__item:nth-child(2n + 1) {
        background-color: pink;
      }

      .content__item:nth-child(2n + 2) {
        background-color: lightblue;
      }

      .content__item:nth-child(2n + 3) {
        background-color: violet;
      }

      .content__item:nth-child(2n + 4) {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="nav">
        <ul class="nav__wrapper">
          <li class="nav__item active">新闻</li>
          <li class="nav__item">体育</li>
          <li class="nav__item">社会</li>
          <li class="nav__item">财经</li>
          <li class="nav__item">娱乐</li>
          <li class="nav__item">汽车</li>
          <li class="nav__item">游戏</li>
        </ul>
      </div>
      <div class="content">
        <div class="content__wrapper">
          <div class="content__item">新闻</div>
          <div class="content__item">体育</div>
          <div class="content__item">社会</div>
          <div class="content__item">财经</div>
          <div class="content__item">娱乐</div>
          <div class="content__item">汽车</div>
          <div class="content__item">游戏</div>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
    <script>
      var navBs = BetterScroll.createBScroll(".nav", {
        scrollX: true,
        click: true,
        bounce: false,
      });

      var contentBs = BetterScroll.createBScroll(".content", {
        scrollX: true,
        scrollY: true,
        click: true,
        bounce: true
      });

      var navItems = document.querySelectorAll(".nav__item");
      var contentItems = document.querySelectorAll(".content__item");


      var currentIndex = 0;
      var contentWidth = contentItems[0].offsetWidth;

     contentBs.on('touchEnd', function(e) {
      console.log(e)

      setTimeout(function(){
        contentBs.scrollTo(-750, 0, 300)
      })
     
     })
    </script>
  </body>
</html>
